<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
            list-style: none;
            text-align: center;
        }
        ul {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        li {
            width: 100px;
            height: 50px;
            border: solid;
            text-align: center;
            line-height: 50px;
        }

        .active {
            background-color: pink;
        }

        .titles {
            position: absolute;
            left: 0px;
            top: 100%;
            width: 300px;
            height: 300px;
            border: solid;
        }
    </style>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in title" :class="{active:activeIndex == index}" @mouseover="activeIndex = index" @mouseout="activeIndex = -1">
                {{item.name}}

                <div class="titles" v-show="activeIndex == index">
                    <p v-for="(onitem,onindex) in item.products">{{onitem.name}} --
                        {{onitem.price}}</p>
                </div>
            </li>
        </ul>

    </div>


    <script src="../js/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                activeIndex: 0,
                title: [
                    {
                        id: 1,
                        name: '数码',
                        products: [
                            {
                                id: 1,
                                name: 'Macbook Pro 2022',
                                price: 998
                            },
                            {
                                id: 2,
                                name: 'iphone 14 Pro Mini',
                                price: 588
                            },
                            {
                                id: 3,
                                name: 'ipod',
                                price: 8
                            }
                        ]
                    },
                    {
                        id: 2,
                        name: '服饰',
                        products: [
                            {
                                id: 4,
                                name: '精神小伙爆款旺仔牛奶全身套',
                                price: 99
                            },
                            {
                                id: 5,
                                name: '潮牌豆豆鞋',
                                price: 59
                            },
                            {
                                id: 6,
                                name: '牌牌琦电动车',
                                price: 1999
                            }
                        ]
                    },
                    {
                        id: 3,
                        name: '其他',
                        products: [
                            {
                                id: 7,
                                name: '一罐空气',
                                price: 0.5
                            },
                            {
                                id: 8,
                                name: '老头环',
                                price: 298
                            },
                            {
                                id: 9,
                                name: '猫抓板',
                                price: 10
                            }
                        ]
                    }
                ]
            }
        })

    </script>
</body>

</html>